{extend name="layout" /}

{block name="breadcrumb"}
<h2>{$title}</h2>
<ol class="breadcrumb">
    <li><a href="{:url('index/index')}">首页</a></li>
    <li><a href="{:url('index')}">角色列表</a></li>
    <li><strong>{$title}</strong></li>
</ol>
{/block}

{block name="main"}
<div class="ibox float-e-margins">
    <div class="ibox-title">
        <h5>{$title}</h5>
    </div>
    <div class="ibox-content">
        <form method="post" class="form-horizontal" onsubmit="return toSubmit()">
            <div class="form-group">
                <label class="col-sm-2 control-label">名称</label>
                <div class="col-sm-8">
                    <input type="text" name="name" value="{$model ? $model.name : ''}" class="form-control" required/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">描述</label>
                <div class="col-sm-8">
                    <input type="text" name="description" value="{$model ? $model.description : ''}"
                           class="form-control"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">分配权限</label>
                <div class="col-sm-8">

                    <table class="table permission-table">
                        {foreach $permission as $key=>$vo }

                        <thead>
                        <tr class="gray-bg">
                            <th colspan="4">
                                <div class="checkbox checkbox-success checkbox-inline">
                                    <input type="checkbox" id="{$vo.categoryId}" data-id="{$vo.categoryId}"
                                           class="item-all" {$vo.active== 'true' ? 'checked' : ''} />
                                    <label for="{$vo.categoryId}"> {$vo.categoryName} </label>
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="body{$vo.categoryId}">
                        {foreach $vo['permission'] as $k=>$v }
                        <tr class="border-bottom">
                            {foreach $v as $c_k=>$child }
                            <td>
                                <div class="checkbox checkbox-success checkbox-inline">
                                    <input type="checkbox" id="inlineRadio{$child.id}" value="{$child.id}"
                                           class="checkbox-item" data-category="{$vo.categoryId}" name="permission_id[]"
                                           {$child.active== 'true' ? 'checked' : ''} />
                                    <label for="inlineRadio{$child.id}"> {$child.name} </label>
                                </div>
                            </td>
                            {/foreach}
                        </tr>
                        {/foreach}
                        </tbody>

                        {/foreach}
                    </table>

                </div>
            </div>


            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-2">
                    <input type="hidden" name="status" value="1" class="form-control"/>
                    <input type="hidden" name="sort_num" value="{$model ? $model.sort_num : 0}" class="form-control"/>

                    {if ( $model && $model.id > 0) }
                    <input type="hidden" name="id" value="{$model.id}">
                    {/if}
                    <button class="btn btn-primary" type="submit">提交</button>
                    <button class="btn btn-white" type="button"><a href="{:url('index')}">取消</a></button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}

{block name="jsFile"}
<script>
    // 点击目录全选
    $('.item-all').click(function () {
        let id = $(this).data('id');
        $('#body' + id + ' .checkbox-item').prop('checked', $(this).prop('checked'));
    });

    // 点击权限判断是否全选
    $('.checkbox-item').click(function () {
        let category = $(this).data('category');
        // 总长度
        let len = $('#body' + category + ' input').length;
        // 被选中的长度
        let checked_len = $('#body' + category + ' input:checked').length;
        let isChecked = true;
        if (len !== checked_len) {
            isChecked = false;
        }
        // 判断目录是否能选择
        $('#' + category).prop('checked', isChecked);
    });
</script>
{/block}